<template>
    <div style="background-color: #3e3e3e;font-size: 14px;height: 40px">
        <div style="display: flex;" class="container">
            <div style="display: flex;flex: 1;width: auto">
                <div class="active">你好，欢迎来到茶叶商城</div>
                <div class="active">请登录</div>
                <div class="active">注册</div>
            </div>
            <div style="display: flex;" class="rightfix">
                <div class="active" @click="loginModal">登录</div>
                <div class="active">注册</div>
                <div class="active">消息通知</div>
                <div class="active">我的订单</div>
                <div class="shop-car" @click="ondd"><i class="el-icon-shopping-cart-2"></i>我的购物车（0）


                <div class="shop-car-children" style="vertical-align: center">
                    <i class="el-icon-shopping-cart-2" style="margin: 0 10px">你的购物车是空的</i>
                </div>
                </div>
            </div>
        </div>


    </div>
</template>

<script>

export default {
    name:'Header',
    data() {
        return {

        };
    },
    mounted() {
    },
    methods: {
        loginModal(){
           this.$router.push('/login')
        },
        ondd(){
            this.$router.push('/myCart')
        }

    }
};
</script>

<style>
.active{
    line-height: 40px;
    color: #cfcfcf;
    margin-right: 20px;
    font-size: 12px;
}
.active:hover{
    cursor: pointer;
    color: #FFFFFF;
}
.shop-car{
    text-align: center;
    cursor: pointer;
    width: 150px;
    line-height: 40px;
    height: 40px;
    display: inline-block;
    position: relative;
    background-color: #8f8f8f;
}
.shop-car:hover{
    background-color: #f83905;
}


.shop-car .shop-car-children{
    position: absolute;
    top: 40px;
    left: 0;
    height: 100px;
    display: none;
    width: 300px;


    background-color: #FFFFFF;
}

.shop-car:hover .shop-car-children{
    display: block;
    background-color: #FFFFFF;
    z-index: 10;
    line-height: 100px;
    box-shadow: 0 16px 32px 0 rgba(48,55,66,0.15);
}

</style>